<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="lunbo">
			<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				circular :indicator-color="colors[0]" :indicator-active-color="colors[1]">
				<swiper-item v-for="(item,index) in swiperPics" :key="index">
					<view class="swiper-item">
						<image style="width: 100%;" :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 分类选择 -->
		<view class="category-tabs">
			<view :class="{'active': currentCategory === 'history'}" @click="currentCategory = 'history'">景点</view>
			<view :class="{'active': currentCategory === 'food'}" @click="currentCategory = 'food'">美食</view>
			<view :class="{'active': currentCategory === 'people'}" @click="currentCategory = 'people'">名人</view>
			<view :class="{'active': currentCategory === 'movie'}" @click="currentCategory = 'movie'">电影院</view>
		</view>

		<!-- 内容展示 -->
		<view class="category-content" v-if="currentCategory">
			<view class="item" v-for="(item, index) in currentCategoryData" :key="index" @tap="toDetails(item)">
				<image :src="item.pic" mode="aspectFill" class="item-image"></image>
				<view class="item-info">
					<view class="item-title">{{ item.name }}</view>
					<!-- 文字内容可以根据实际情况添加 -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		CONFIG,
		headers1
	} from '../../utils/config';

	import {
		userStore
	} from "../../store/userStore";
	let store = userStore()
	onLoad(() => {})

	const swiperPics = ref([
		"../../static/images/jinsixia.jpg",
		"../../static/images/niubeil.jpg",
		"/static/images/shibing.png",
		"../../static/images/tayunshan.jpg",
	]);
	
	const colors = ref(["#fff", "#0a0"]);

	const historys = ref([{
			id: 1,
			name: '金丝峡',
			pic: '../../static/images/jinsixia.jpg',
			lat: 33.342019,
			lon: 110.556287
		},
		{
			id: 2,
			name: '牛背梁',
			pic: '../../static/images/niubeil.jpg',
			lat: 33.4450,
			lon: 108.967023
		},
		{
			name: '溶洞',
			pic: '../../static/images/rongdong.jpg',
			lat: 33.566687,
			lon: 109.167079
		},
		{
			name: '塔云山',
			pic: '../../static/images/tayunshan.jpg',
			lat: 33.4450,
			lon: 110.556287
		},
		{
			name: '月亮湾瀑布',
			pic: '/static/images/yueliangwanpubu.jpg',
			lat: 33.342019,
			lon: 108.967023
		}
	]);

	const foods = ref([{
			name: '丹凤牛筋面',
			pic: '/static/images/danfengniujinmian.jpg'
		},
		{
			name: '柿饼',
			pic: '/static/images/shibing.png'
		},
		{
			name: '镇安黑米皮',
			pic: '/static/images/zhenanheimipi.png'
		},
		{
			name: '洋芋糍粑',
			pic: '/static/images/yangyuciba.jpg'
		},
		{
			name: '羊肉泡馍',
			pic: '/static/images/yangroupaomo.jpg'
		}
	]);

	const people = ref([{
			name: '孙见喜',
			pic: '/static/images/s.jpg'
		},
		{
			name: '京夫',
			pic: '/static/images/j.jpg'
		},
		{
			name: '贾平凹',
			pic: '/static/images/j1.jpg'
		},
		{
			name: '陈发虎',
			pic: '/static/images/c.jpg'
		},
		{
			name: '方英文',
			pic: '/static/images/f.jpg'
		}
	]);

	const movie = ref([{
			name: '和平电影院',
			pic: '/static/images/m1.jpg'
		},
		{
			name: '中影·国际影城',
			pic: '/static/images/m2.jpg'
		},
		{
			name: 'CGV影城',
			pic: '/static/images/m3.jpg'
		},
		{
			name: '太平洋影城',
			pic: '/static/images/m4.jpg'
		},
		{
			name: '万达影城',
			pic: '/static/images/m5.jpg'
		}
	]);
	const currentCategory = ref('history'); // 默认显示名胜古迹

	const currentCategoryData = computed(() => {
		switch (currentCategory.value) {
			case 'history':
				return historys.value;
			case 'food':
				return foods.value;
			case 'people':
				return people.value;
			case 'movie':
				return movie.value;
			default:
				return historys.value;
		}
	});

	let shangluoitems = ref([])
	async function getShangluoPost(type) {
		let data = {
			"type": type
		}
		let ed = encodeURI(JSON.stringify(data))
		let res = await uni.$get(CONFIG.leanbase + "/1.1/classes/play?where=" + ed)
		console.log(res)
		shangluoitems.value = res.results
	}

	function toDetails(item) {
		console.log(item)
		const json = JSON.stringify(item)
		uni.navigateTo({
			url: "/pages/playDetails/playDetails?item=" + encodeURI(json)
		})
	}
</script>
<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
	}

	.lunbo {
		width: 100%;
	}

	.category-tabs {
		display: flex;
		justify-content: space-around;
		padding: 10px;
		background-color: #f2f2f2;
		width: 100%;
		margin-top: 5px;
	}

	.category-tabs view {
		flex: 1;
		text-align: center;
		padding: 10px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.category-tabs view.active {
		background-color: #00aaff;
		color: #fff;
	}

	.category-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		// padding: 10px;
		margin-top: 5px;
	}

	.item {
		width: 42%;
		margin: 11px;
		margin-top: 10px;
	}

	.item-image {
		width: 100%;
		height: 130px;
		border-radius: 8px;
	}

	.item-info {
		width: 100%;
		text-align: center;
	}

	.item-title {
		font-size: 16px;
		font-weight: bold;
		// padding: 10px;
	}
</style>